<template>
  <section class="h-[95vh] flex justify-center items-center">
    <h1>人生如茶，沉时坦然，浮时淡然，拿得起也需要放得下</h1>
  </section>
  <section class="h-[95vh] flex justify-center items-center">
    <h1>君子的力量永远是行动的力量，而不是语言的力量</h1>
  </section>
  <section class="h-[95vh] flex justify-center items-center">
    <h1>
      多数的错失，是因为不坚持，不努力，不挽留，然后催眠自己说一切都是命运
    </h1>
  </section>
  <section class="h-[95vh] flex justify-center items-center">
    <h1>身健如山，心静似水，淡泊名利</h1>
  </section>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
// onMounted(() => {
//   gsap.registerPlugin(ScrollTrigger);
//   const sections = document.querySelectorAll("section");
//   sections.forEach((section) => {
//     gsap.fromTo(
//       section,
//       {
//         backgroundPositionY: `${window.innerHeight / 2}px`,
//       },
//       {
//         backgroundPositionY: `${-window.innerHeight / 2}px`,
//         scrollTrigger: {
//           trigger: section,
//           scrub: true,
//         },
//       }
//     );
//   });
// });
</script>

<style lang="less" scoped>
section:nth-child(1) {
  background: url("../assets/imges/indexpage/1.jpg") no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
section:nth-child(2) {
  background: url("../assets/imges/indexpage/2.jpg") no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
section:nth-child(3) {
  background: url("../assets/imges/indexpage/3.png") no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
section:nth-child(4) {
  background: url("../assets/imges/indexpage/4.png") no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
h1 {
  color: white;
  text-shadow: 1px 1px 3px black;
  z-index: 1;
  font-size: 20px;
  font-weight: 400;
  margin: 0;
}
</style>
